<style lang="scss" scoped>
  img { height: 17px; cursor: pointer;}
  .bigImg {
    width: 150px;
    height: auto;
    border-radius: 4px;
  }
</style>

<template>
  <el-popover placement="right" width="100px" trigger="hover">
      <template #reference>
        <img @click="handleVideoClick" src="@/assets/layout/videoBac.png" alt="">
      </template>
      <img @click="handleVideoClick" :src="video.posterUrl" class="bigImg" alt="">
    </el-popover>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  video: {
    type: Object,
    default: () => ({})
  }
})
const handleVideoClick = () => {
  window.localStorage.setItem('current_video', JSON.stringify(props.video))
  router.push({
    path: '/bulletin-board-look-source'
  })
  // window.open(props.video.url)
}
</script>